<template>
  <div>
    <div class="box">
      <el-button type="primary" @click="importClick">excel导入</el-button>
      <el-button type="success" @click="data.dialogVisible = true"
        >excel导出</el-button
      >
    </div>
    <div class="box">
      <!-- 员工列表 -->
      <el-table :data="data.tableData" border style="width: 100%">
        <el-table-column type="index" label="#" />
        <el-table-column prop="username" label="姓名" />
        <el-table-column prop="mobile" label="联系方式" />
        <el-table-column prop="avatar" label="头像" style="text-align: center">
          <template #default="scope">
            <img :src="scope.row.avatar" />
          </template>
        </el-table-column>
        <el-table-column prop="role" label="角色">
          <template #default="scope">
            <el-tag>{{ scope.row.role[0].title }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="openTime" label="开通时间">
          <template #default="scope">
            {{ formdate(scope.row.openTime) }}
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        v-model:current-page="data.pageInfo.page"
        v-model:page-size="data.pageInfo.size"
        :page-sizes="[1, 2, 6, 10]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="data.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 导出模态框 -->
    <el-dialog v-model="data.dialogVisible" title="导出为 excel" width="40%">
      <h3>文件名：</h3>
      <br /><el-input
        v-model="data.input"
        placeholder="请给导出的文件起个name"
      />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="data.dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="dc"> 导出 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed } from "vue";
import { useStore } from "vuex";
import { useRouter, useRoute } from "vue-router";
import * as XLSX from "xlsx"; // Vue3 版本
const store = useStore();
const router = useRouter();
const data = reactive({
  pageInfo: {
    page: 1,
    size: 2,
  },
  input: "员工管理表", //给导出的excel文件起个名字 默认员工管理表
  total: 10,
  dialogVisible: false, //导出模态框
  tableData: [], //员工列表
});
const getlist = () => {
  // 请求员工列表
  store.dispatch("getPermissionsList", data.pageInfo).then((res) => {
    console.log(res);
    data.tableData = res.data.list;
    data.total = res.data.total;
  });
};
getlist();
// 时间戳转换
const formdate = computed(() => {
  return function (val) {
    let data = new Date(Number(val));
    let nian = data.getFullYear();
    let yue = data.getMonth() + 1;
    let ri = data.getDate();
    yue = yue < 10 ? "0" + yue : yue;
    ri = ri < 10 ? "0" + ri : ri;
    return `${nian}-${yue}-${ri}`;
  };
});

// 点击跳转导入excel页面
const importClick = () => {
  router.push("/import");
};

// 每页数据数量
const handleSizeChange = (val) => {
  data.pageInfo.size = val;
  getlist();
};
// 当前页码
const handleCurrentChange = (val) => {
  data.pageInfo.page = val;
  getlist();
};
// 导出
const dc = () => {
  data.dialogVisible = false;

  // 请求所有员工列表
  store.dispatch("getAllList").then((res) => {
    let data1 = JSON.parse(JSON.stringify(res.data.list));
    // 把角色数组变成字符串
    data1.forEach((item) => {
      item.role = item.role[0].title;
    });

    let head = {
      _id: "_id",
      id: "id",
      role: "角色",
      avatar:"头像",
      mobile:"手机号",
      openTime:"开通时间",
      username:"姓名"
    };

    const list = data1.map((item) => {
      const obj = {};
      for (const k in item) {
        if (head[k]) {
          obj[head[k]] = item[k];
        }
      }
      return obj;
    });
    const val = XLSX.utils.json_to_sheet(list); //此处list为表格的数据
    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, val, "test-data"); //自定义的sheet表名
    XLSX.writeFile(wb, `${data.input}.xlsx`); //自定义的文件名
  });
};
</script>

<style scoped lang='scss'>
.box {
  padding: 20px;
  background: white;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  text-align: right;
  margin-bottom: 30px;
  img {
    width: 60px;
  }
}
</style>